<template>
    <div class="container">
        <top-cmp></top-cmp>
        <div class="commodity" @click="prev">
            <img src="../assets/img/001.jpg" alt="">
            <div class="floats" :style="bg">
                <div class="prie">
                    <div class="leftIcon"></div>
                    <div class="title" :style="opacity == 0 ? 'opacity:0;' : 'opacity:1;'">兵争要地，势定三国——《地图上的三国》限定特装版
                    </div>
                    <div class="rightIcon"></div>
                    <div class="rightIcon-last"></div>

                </div>
            </div>
            <div class="top-swiper-info-nums"><span>1</span><span class="icon">/</span><span>1</span></div>
        </div>

        <div class="project-title"><img class="project-title-logo render-line-clamp"
                src="https://p6.moimg.net/md/icon/project_title_icon@2x.png">
            兵争要地，势定三国——《地图上的三国》限定特装版
        </div>

        <div class="project-type-address-bullish">
            <div class="item pro-type"><img class="icon"
                    src="https://p6.moimg.net/md/icon/project_type_icon@2x.png"><span>出版</span></div>
            <div class="item pro-bullish"><img class="icon"
                    src="https://p6.moimg.net/md/icon/bullish_flase@2x.png"><span class="text">3022人看好</span></div>
        </div>

        <div class="status-box">
            <div class="status"></div>
            <div class="font">502.38%</div>
        </div>

        <div class="status-info">
            <div class="left">
                <p>150785.00</p>
                <div>1440人支持 <span></span></div>
            </div>
            <div class="center">
                <p>30天</p>
                <div>剩余时间</div>
            </div>
            <div class="right">
                <p>3000</p>
                <div>众筹目标 <span></span></div>
            </div>
        </div>

        <div class="project-initiator"><img class="project-initiator-icon"
                src="https://p6.moimg.net/project/project_20190919_1568862136_9686_crop.jpg?x-oss-process=image/resize,w_152,m_lfit/quality,Q_80/auto-orient,1/sharpen,100/ignore-error,1">
            <div class="project-initiator-info">
                <div class="tit"><span class="name">北京理工大学出版社</span><i class="i">发起人</i></div>
            </div>
        </div>
        <p><img src="../assets/img/00000.jpg" alt=""></p>
        <p><img src="../assets/img/00001.jpg" alt=""></p>
        <p><img src="../assets/img/00003.jpg" alt=""></p>
        <p><img src="../assets/img/00004.jpg" alt=""></p>
        <p><img src="../assets/img/00005.jpg" alt=""></p>

        <div class="foots">
            <button class="button" @click="add">立即购买支持</button>

            <van-sku v-model="show" :sku="sku" :goods="goods" :goods-id="1" :quota="0" :quota-used="0"
                :hide-stock="sku.hide_stock" :message-config="messageConfig" @buy-clicked="onBuyClicked"
                @add-cart="onAddCartClicked"  />
        </div>

    </div>
</template>

<script>
import topCmp from '@/components/topCmp.vue';
export default {
    data() {
        return {
            title:" 兵争要地，势定三国——《地图上的三国》限定特装版 ",
            show: false,
            sku: {
                // 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。
                // 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。
                tree: [
                    {
                        k: '版本', // skuKeyName：规格类目名称
                        k_s: 's1', // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
                        v: [
                            {
                                id: '1', // skuValueId：规格值 id
                                name: '加厚版', // skuValueName：规格值名称
                                imgUrl: 'https://p6.moimg.net/path/dst_project/5564390/202210/1916/1027/22101910278Wk0eKMwDjoZEeYZ0OEAJ5O9BaRm7Y.jpg?x-oss-process=image/resize,w_170,h_170,m_lfit/quality,Q_80/auto-orient,1/sharpen,100/ignore-error,1', // 规格类目图片，只有第一个规格类目可以定义图片
                                previewImgUrl: 'https://p6.moimg.net/path/dst_project/5564390/202210/1916/1027/22101910278Wk0eKMwDjoZEeYZ0OEAJ5O9BaRm7Y.jpg?x-oss-process=image/resize,w_170,h_170,m_lfit/quality,Q_80/auto-orient,1/sharpen,100/ignore-error,1', // 用于预览显示的规格类目图片
                            },
                            {
                                id: '2', // skuValueId：规格值 id
                                name: '加靓版', // skuValueName：规格值名称
                                imgUrl: 'https://p6.moimg.net/path/dst_project/5564390/202210/1916/1027/22101910278Wk0eKMwDjoZEeYZ0OEAJ5O9BaRm7Y.jpg?x-oss-process=image/resize,w_170,h_170,m_lfit/quality,Q_80/auto-orient,1/sharpen,100/ignore-error,1', // 规格类目图片，只有第一个规格类目可以定义图片
                                previewImgUrl: 'https://p6.moimg.net/path/dst_project/5564390/202210/1916/1027/22101910278Wk0eKMwDjoZEeYZ0OEAJ5O9BaRm7Y.jpg?x-oss-process=image/resize,w_170,h_170,m_lfit/quality,Q_80/auto-orient,1/sharpen,100/ignore-error,1', // 用于预览显示的规格类目图片
                            },

                        ],
                        largeImageMode: true, //  是否展示大图模式
                    }
                ],
                // 所有 sku 的组合列表，比如红色、M 码为一个 sku 组合，红色、S 码为另一个组合
                list: [
                    {
                        id: 2259, // skuId
                        s1: '1', // 规格类目 k_s 为 s1 的对应规格值 id
                        s2: '1', // 规格类目 k_s 为 s2 的对应规格值 id
                        price: 2100, // 价格（单位分）
                        stock_num: 110 // 当前 sku 组合对应的库存
                    }
                ],
                price: '0.00', // 默认价格（单位元）
                stock_num: 227, // 商品总库存
                collection_id: 2261, // 无规格商品 skuId 取 collection_id，否则取所选 sku 组合对应的 id
                none_sku: false, // 是否无规格商品
                messages: [
                    {
                        // 商品留言
                        datetime: '0', // 留言类型为 time 时，是否含日期。'1' 表示包含
                        multiple: '0', // 留言类型为 text 时，是否多行文本。'1' 表示多行
                        name: '留言', // 留言名称
                        type: 'text', // 留言类型，可选: id_no（身份证）, text, tel, date, time, email
                        required: '1', // 是否必填 '1' 表示必填
                        placeholder: '', // 可选值，占位文本
                        extraDesc: ''  // 可选值，附加描述文案
                    }
                ],
                hide_stock: true // 是否隐藏剩余库存
            },
            goods: {
                // 默认商品 sku 缩略图
                picture: 'https://p6.moimg.net/path/dst_project/5564390/202210/1916/1027/22101910278Wk0eKMwDjoZEeYZ0OEAJ5O9BaRm7Y.jpg?x-oss-process=image/resize,w_170,h_170,m_lfit/quality,Q_80/auto-orient,1/sharpen,100/ignore-error,1'
            },
            messageConfig: {
                // 图片上传回调，需要返回一个promise，promise正确执行的结果需要是一个图片url
                uploadImg: () => {
                    return new Promise((resolve) => {
                        setTimeout(() => resolve('https://img01.yzcdn.cn/upload_files/2017/02/21/FjKTOxjVgnUuPmHJRdunvYky9OHP.jpg!100x100.jpg'), 1000);
                    });
                },
                // 可选项，自定义图片上传逻辑，使用此选项时，会禁用原生图片选择
                customUpload: () => {
                    return new Promise((resolve) => {
                        setTimeout(() => {
                            resolve('https://img01.yzcdn.cn/vant/leaf.jpg');
                        }, 1000);
                    });
                },
                // 最大上传体积 (MB)
                uploadMaxSize: 3,
                // placeholder 配置
                placeholderMap: {
                    text: 'xxx',
                    tel: 'xxx',
                },
                // 初始留言信息
                // 键：留言 name
                // 值：留言内容
                initialMessages: {
                    留言: '留言信息'
                }
            },
            opacity: 0,
            bg: 'background-color: transparent;'

        };
    },
    mounted() {
        window.addEventListener('scroll', this.handleScroll)
    },

    methods: {
        handleScroll() {
            var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
            // console.log(scrollTop)
            if (scrollTop >= 300) {
                this.opacity = 1;
                this.bg = 'background-color: #fff;'
            } else {
                this.opacity = 0;
                this.bg = 'background-color: transparent;'
            }
        },
        prev() {
            this.$router.back()
        },
        add() {
            this.show = true
        },
        // 购买
        onBuyClicked(){
            this.$toast("余额不足");
            console.log(this.sku.tree[0].v[0]);
            console.log(this.sku.list[0].price/100);
        },

        // 购物车
        onAddCartClicked(){
            this.$toast("加入成功");
            window.localStorage.setItem("title",this.title)
            window.localStorage.setItem("name",this.sku.tree[0].v[0].name)
            window.localStorage.setItem("price",this.sku.list[0].price/100)

            console.log(this.sku.tree[0]);
            let index=this.sku.tree[0]
            this.$router.push({path: "shoppingcarView", query:{index}})
            console.log();
        }
        
    },
    components: {
        topCmp
    }
}
</script>

<style lang="scss">
.commodity {
    margin-top: 60px;
    height: 376px;
    position: relative;

    .floats {
        // background-color: transparent;
        width: 100%;
        // height: 40px;
        position: fixed;
        top: 12px;
        left: 0;

        .prie {
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: space-around;

            .leftIcon {
                width: 34px;
                height: 34px;
                border-radius: 50%;
                background: url(../assets/img/price.png)no-repeat center center;
                background-size: 50%;
                background-color: #ffffff;
            }

            .rightIcon {
                width: 34px;
                height: 34px;
                border-radius: 50%;
                background: url(../assets/img/home.png)no-repeat center center;
                background-size: 50%;
                background-color: #ffffff;
            }

            .rightIcon-last {
                width: 34px;
                height: 34px;
                border-radius: 50%;
                background: url(../assets/img/fenxiang.png)no-repeat center center;
                background-size: 50%;
                background-color: #ffffff;

            }

            .title {
                height: 20px;
                width: 175px;
                font-size: 15px;
                color: #1a1a1a;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                opacity: 0;
            }
        }
    }

    .top-swiper-info-nums {
        position: absolute;
        bottom: 10px;
        right: 10px;
        background: rgba(0, 0, 0, .5);
        color: #fff;
        padding: 0 5px;
        min-width: 40px;
        height: 17px;
        border-radius: 30%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        font-weight: 700;
    }

}

.project-title {
    margin: 20px 20px 0;
    font-size: 20px;
    font-weight: 700;
    line-height: 20px;
    clear: both;

    .project-title-logo {
        width: 49px;
        height: 22px;
        display: inline-block;
        vertical-align: top;
        margin-top: 2px;
    }
}

.project-type-address-bullish {
    display: flex;
    justify-content: space-between;
    margin: 10px 20px;

    .item {
        display: flex;
        align-items: center;
        font-size: 12px;

        .item.pro-type {
            margin-right: 20px;
        }

        .icon {
            width: 12px;
            height: 12px;
            margin-right: 5px;
        }
    }

    .item.pro-bullish {

        margin-left: auto;
        flex-direction: column;

        .icon {
            width: 18px;
            height: 15px;
            margin: 0 0 5px;
        }
    }
}

.status-box {
    display: flex;
    align-items: center;
    margin: 0 20px;

    .status {
        display: flex;
        flex: 1;
        height: 4px;
        background-color: #3ad1b6;
    }

    .font {
        margin-left: 6px;
        font-size: 12px;
    }
}

.status-info {
    display: flex;
    justify-content: space-around;

    p {
        font-size: 17px;
        font-weight: bolder;
    }

    div {
        font-size: 12px;
    }

    span {
        margin-left: 3px;
        padding: 5px 5px;
        background: url(../assets/img/project_bottom_more.png) no-repeat center center;
        background-size: 100%;
    }

    .left>div {
        width: 75px;
        height: 14px;
        background-color: #f8f8f8;
    }

    .right>div {
        width: 75px;
        height: 14px;
        background-color: #f8f8f8;
    }
}

.project-initiator {
    border-top: 3px solid #f2f2f2;
    border-bottom: 3px solid #f2f2f2;
    display: flex;
    padding: 20px 15px;
    align-items: center;

    .project-initiator-icon {
        width: 37px;
        height: 37px;
        border: 3px solid #fbd100;
        border-radius: 50%;
        margin-right: 10px;
    }

    .project-initiator-info {
        display: flex;
        flex-direction: column;
        font-size: 15px;

        .i {
            background-color: #000;
            color: #fff;
            font-size: 12px;
            font-style: normal;
            margin-left: 5px;
            padding: 0 5px;
            border-radius: 2px;
            line-height: 12px;
        }
    }
}

.foots {
    .button {
        width: 294px;
        height: 39px;
        background-color: #00c4a1;
        border-radius: 10px;
        border: none;
        font-size: 12px;
        color: #fff;
        text-align: center;
        position: fixed;
        display: inline-block;
        bottom: 8px;
        left: 0;
        right: 0;
        margin: 0 auto;
    }
}
</style>